<template>
  <a-drawer
    v-model:visible="visible"
    class="custom-class"
    title="主题设置"
    placement="right"
  >
    <div class="">
      <div class="drawer-card">
        <h4>主题颜色</h4>
        <div class="drawer-themeColor">
          <span
            v-for="(item, key) in themeColorList"
            :key="key"
            @click="themeColorfun(item)"
            class="drawer-themeColor-item"
            :class="item == themeColor ? 'check-active' : ''"
            :style="{ background: item }"
          />
        </div>
      </div>
      <a-divider class="drawer-divider" />
      <div class="drawer-card">
        <h4>布局方式</h4>
        <div class="drawer-layoutsType">
          <span
            class="drawer-layoutsType-item"
            :class="'left' == layoutsType ? 'check-active-img' : ''"
            @click="layoutsTypefun('left')"
          >
            <!-- <img src="@/assets/img/layouts/left.png" /> -->
          </span>
          <span
            class="drawer-layoutsType-item"
            :class="'dark' == layoutsType ? 'check-active-img' : ''"
            @click="layoutsTypefun('dark')"
          >
            <!-- <img src="@/assets/img/layouts/dark.png" /> -->
          </span>
        </div>
      </div>
    </div>
  </a-drawer>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  props: {
    show: Boolean,
  },
  setup(props) {
    const state = reactive({
      visible: props.show,
      layoutsType: "left",
      themeColorList: [
        "#2f54eb",
        "#1890ff",
        "#13c2c2",
        "#52c41a",
        "#faad14",
        "#fa541c",
        "#f5222d",
        "#722ed1",
        "#9ae100",
        "#02fffa",
        "#f1e14c",
        "#f110ba",
        "#FFC0CB",
      ],
      themeColor: "",
    });

    const visibleChange = () => {
      state.visible = state.visible ? false : true;
    };
    const layoutsTypefun = (type) => {
      state.layoutsType = type;
    };
    const themeColorfun = (color) => {
      state.themeColor = color;
    };

    return {
      ...toRefs(state),
      visibleChange,
      themeColorfun,
      layoutsTypefun,
    };
  },
});
</script>
<style scoped>
.drawer-card {
  padding: 2px;
  border: 0;
}
.drawer-divider {
  margin: 10px 0;
}
.check-active::before {
  content: "\2713";
  color: #096dd9;
  margin-top: 4px;
  display: flex;
  justify-content: center;
  position: relative;
  top: -4px;
  font-weight: 700;
}
.check-active-img::before {
    content: "\2713";
    color: #1890ff;
    margin-top: 0px;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 45px;
    font-size: 20px;
    height: 45px;
    font-weight: bold;
}
.drawer-themeColor-item {
  width: 20px;
  height: 20px;
  margin: 2px 8px 0 0;
  display: inline-block;
  border-radius: 3px;
  background: #f5f5ff;
  cursor: pointer;
}
.drawer-layoutsType{
    position: relative;
}
.drawer-layoutsType-item {
  margin: 5px;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  width: 44px;
  height: 45px;
  display: inline-block;
}
.drawer-layoutsType-item img {
  width: 100%;
  height: 100%;
}
</style>